<style>
    .div-Block {
        border: 1px solid rgb(103, 240, 199);
        padding: 15px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .code-Block {
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .field-line {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 0;
    }

    .box-title {
        color: rgb(210, 210, 210);
        padding: 6px;
    }

    .active {
        background-color: rgb(9, 124, 34);
    }

    .passive {
        background-color: rgb(27, 6, 207);
    }

    .field-title {
        width: 70px;
    }
</style>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script src="/static/js/qrcode.min.js"></script>

<div class="div-Block">
    <div class="list-Block">
        <div class="box-title active">主扫收单</div>
        <div class="field-line">
            <div class="field-title">Pid</div>
            <div><input id="pid" type="number" placeholder="场所ID" value="{{pid}}" pattern="^[0-9]*$" readonly></div>
        </div>
        <div class="field-line">
            <div class="field-title">Tid</div>
            <div><select name="Tid" id="tid">
                    {% for k in tid %}
                    <option value="{{k.id}}">{{k.id}},{{k.name}}</option>
                    {% endfor %}
                </select></div>
        </div>
        <div class="field-line">
            <div class="field-title">Reqsn</div>
            <div><input id="reqsn" type="text" placeholder="商户流水号" value="{{reqsn}}"></div>
        </div>
        <div class="field-line">
            <div class="field-title">Trxamt</div>
            <div><input id="trxamt" type="number" placeholder="金额(分)" value="1" pattern="^[0-9]*$"
                    style="text-align: right;"></div>
        </div>
        <div class="field-line">
            <div class="field-title">Paytype</div>
            <div>
                <select name="Paytype" id="paytype">
                    <option value="W01" selected>微信支付</option>
                    <option value="A01">支付宝支付</option>
                </select>
            </div>
        </div>
        <div class="field-line">
            <div class="field-title"></div><input id="submit" type="button" value="主扫提交">
        </div>
    </div>
    <div class="code-Block">
        <div id="result4"></div>
    </div>
</div>

<div class="div-Block">
    <div class="list-Block">
        <div class="box-title passive">被扫收单</div>
        <div class="field-line">
            <div class="field-title">Pid</div>
            <div><input id="b-pid" type="number" placeholder="场所ID" value="{{pid}}" pattern="^[0-9]*$" readonly></div>
        </div>
        <div class="field-line">
            <div class="field-title">Tid</div>
            <div><select name="Tid" id="b-tid">
                    {% for k in tid %}
                    <option value="{{k.id}}">{{k.id}},{{k.name}}</option>
                    {% endfor %}
                </select></div>
        </div>
        <div class="field-line">
            <div class="field-title">Reqsn</div>
            <div><input id="b-reqsn" type="text" placeholder="商户流水号" value="{{reqsn}}"></div>
        </div>
        <div class="field-line">
            <div class="field-title">Trxamt</div>
            <div><input id="b-trxamt" type="number" placeholder="金额(分)" value="1" pattern="^[0-9]*$"
                    style="text-align: right;">
            </div>
        </div>
        <div class="field-line">
            <div class="field-title">Paytype</div>
            <div>
                <input id="b-authcode" type="number" placeholder="付款码" pattern="^[0-9]*$">
            </div>
        </div>
        <div class="field-line">
            <div class="field-title"></div><input id="b-submit" type="button" value="被扫提交">
        </div>
    </div>
    <div class="code-Block">
        <div id="result5"></div>
    </div>
</div>
<script>
    let timer
    function createScan(url, face) {

        let qrDiv = document.getElementById("result4");
        // 创建图片
        let img = document.createElement("img");
        img.id = "qrCodeIco";
        img.src = face;
        img.style.position = "absolute";
        img.style.width = "24px";
        img.style.height = "24px";
        qrDiv.appendChild(img);
        // 创建二维码
        let qr = document.createElement("div");
        qr.id = "qrcode";
        let qrcode = new QRCode(qr, {
            text: url,
            width: 180,
            height: 180,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
        qrDiv.appendChild(qr);

        let margin = ($("#qrcode").height() - $("#qrCodeIco").height()) / 2;
        $("#qrCodeIco").css("margin", margin);
    }
    function waitSyncData(reqsn) {
        console.log(reqsn);
        d = { reqsn: reqsn }
        $.ajax({
            type: "POST",
            url: "/loan/transquery/",
            data: d,
            dataType: "json",
            success: function Success(data) {
                console.log(data);
                if (data.resmsg.trxstatus == "0000") {
                    console.log("ok");
                    $("#result4").html("<p>支付成功</p>");
                    $("#result5").html("<p>支付成功</p>");
                    clearInterval(timer);
                }
            }
        });
    }
    $(document).ready(function () {

        $("#pid").on("keyup", function (e) {
            if (e.which == 13) {
                let newPid = $(this).val();
                console.log(newPid);
                $.get("/place/battrs/" + newPid + "/", function (data, status) {
                    console.log(data);
                });
            }
        });

        $("#submit").on("click", function () {
            // 主扫
            let pid = $("#pid").val();
            let tid = $("#tid").val();
            let reqsn = $("#reqsn").val();
            let trxamt = $("#trxamt").val();
            let paytype = $("#paytype").val();
            console.log(pid, tid, reqsn, trxamt, paytype);
            d = {
                pid: pid,
                tid: tid,
                reqsn: reqsn,
                trxamt: trxamt,
                paytype: paytype,
            }
            $.post("/loan/activepayV2/", d, function (data, status) {
                console.log(data);
                $("#result4").html("");
                if (paytype == "W01") {
                    var png = "/static/images/wechat.png";
                } else {
                    var png = "/static/images/alipay2.png";
                }
                createScan(data.resmsg.payinfo, png);
                timer = setInterval(waitSyncData, 3000, data.resmsg.reqsn);
            });
        });

        $("#b-submit").on("click", function () {
            // 被扫
            let pid = $("#b-pid").val();
            let tid = $("#b-tid").val();
            let reqsn = $("#b-reqsn").val();
            let trxamt = $("#b-trxamt").val();
            let authcode = $("#b-authcode ").val();
            console.log(pid, tid, reqsn, trxamt, authcode);
            d = {
                pid: pid,
                tid: tid,
                reqsn: reqsn,
                trxamt: trxamt,
                authcode: authcode,
            }
            $.post("/loan/sweptpayV2/", d, function (data, status) {
                console.log(data);
                // $("#result5").html(JSON.stringify(data));
                $("#result5").html("<p> rescode: " + data.rescode + "</p>");
                let obj = data.resmsg;
                Object.keys(obj).forEach((x) => {
                    $("#result5").html($("#result5").html() + "<p>" + x + ": " + obj[x] + "</p>");
                });
                timer = setInterval(waitSyncData, 3000, data.resmsg.reqsn);
            });
        });
    });
</script>